<template>
  <div class="selection">
    <PublicHead></PublicHead>
    <div class="selectionBox">
      <div class="box" @mouseover="onMouseOver(1)" @mouseout="onMouseOut(1)" @click="toDeclare(0)">
        <div :class="{active1: activeIndex === 1  }">
        </div>
        <p>国家级</p>
        <p>GUOJIAJI</p>
      </div>
      <div class="box" @mouseover="onMouseOver(2)" @mouseout="onMouseOut(2)" @click="toDeclare(1)">
        <div class="box2" :class="{active2: activeIndex === 2  }">
        </div>
        <p>省级</p>
        <p>SHENGJI</p>
      </div>
      <div class="box" @mouseover="onMouseOver(3)" @mouseout="onMouseOut(3)" @click="toDeclare(2)">
        <div class="box3" :class="{ active3: activeIndex === 3  }">
        </div>
        <p>市级</p>
        <p>SHIJI</p>
      </div>
    </div>
    <PublicFoot></PublicFoot>
  </div>
</template>

<script>
import PublicHead from '../components/PublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import {user_tiaozhuan} from '../api/api'
export default {
  data(){
    return{
      isActive1: false,
      isActive2: false,
      isActive3: false,
    }
  },
  methods:{
    onMouseOver(index) {
      this[`isActive${index}`] = true;
    },
    onMouseOut(index) {
      this[`isActive${index}`] = false;
    },
    //跳转申报
    toDeclare(num){
      const type= localStorage.getItem('type')
      console.log(type,num);
      if(type=='0'){
        user_tiaozhuan({userId:this.$store.state.userId,type:type,level:num}).then((res)=>{
          if(res.data.data=='1'){
            this.$message.error('您已提交相同级别的申报,为您跳转个人中心查看!');
            setTimeout(() => {
              this.$router.push('/gerenCenter/ptlist')
            }, 1000);
          }else{
            this.$router.push('/shifanpt')
        localStorage.setItem('area',num)
          }
        })
      }else if(type=='1'){
        user_tiaozhuan({userId:this.$store.state.userId,type:type,level:num}).then((res)=>{
          if(res.data.data=='1'){
            this.$message.error('您已提交相同级别的申报,为您跳转个人中心查看!');
            setTimeout(() => {
              this.$router.push('/gerenCenter/ptlist')
            }, 1000);
          }else{
            this.$router.push('/shifanjd')
        localStorage.setItem('area',num)
          }
        })
     
      }else if(type=='2'){
        user_tiaozhuan({userId:this.$store.state.userId,type:type,level:num}).then((res)=>{
          if(res.data.data=='1'){
            this.$message.error('您已提交相同级别的申报,为您跳转个人中心查看!');
            setTimeout(() => {
              this.$router.push('/gerenCenter/ptlist')
            }, 1000);
          }else{
            this.$router.push('/ruzhujg')
          }
        })
      }
    }
  },
  mounted(){
    localStorage.removeItem('area');
  },
  computed: {
    activeIndex() {
      if (this.isActive1) {
        return 1;
      } else if (this.isActive2) {
        return 2;
      } else if (this.isActive3) {
        return 3;
      } else {
        return null;
      }
    },
    
  },
  components: {
    PublicHead,
    PublicFoot
  }
}
</script>

<style scoped lang="scss">
.selectionBox{
  width: 1220px;
height: 628px;
background: #FFFFFF;
margin:  30px auto;
display: flex;
justify-content: center;
align-items: center;
.box{
  margin: 0px 20px;
  width: 320px;
  height: 199px;
  background: url('../assets/img/select/select\(2\).png');
  display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 cursor: pointer;
 &:hover{
  color: #2797E8;
 }
 .active1{
  width: 66px;
  height: 60px;
  background: url('../assets/img/select/shengji\(2\).png');
  
 }
 .box2.active2{
  width: 66px;
  height: 60px;
  background: url('../assets/img/select/shiji\(2\).png');
 }
 .box3.active3{
  width: 66px;
  height: 60px;
  background: url('../assets/img/select/xianqu\(2\).png');
 }
 &:hover{
  background: url('../assets/img/select/select\(1\).png');
}
 div{
  width: 66px;
  height: 60px;
  background: url('../assets/img/select/shengji\(1\).png');
  margin-bottom: 10px;
 }
 .box2{
  background: url('../assets/img/select/shiji\(1\).png');
}
.box3{
  background: url('../assets/img/select/xianqu\(1\).png');
}
 img{
  margin-top: 40px;
  width: 66px;
  height: 60px;

 }
 p:nth-of-type(1){
  text-align:center ;
  width: 95px;
height: 25px;
margin: 0;
font-size: 25px;
font-family: Microsoft YaHei;
font-weight: bold;

margin: 0;

 }
 p:nth-of-type(2){
  text-align:center ;
  margin: 0;
  margin-top: 20px;
  width: 66px;
height: 11px;
font-size: 15px;
font-family: Arial;
font-weight: bold;
color: #E0E0E0;
}
}

}
</style>